<template>
	<view class="cu-modal" :class="modalVisible?'show':''">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="content">个税计算详情</view>
				<view class="action" @tap="close()">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view class="padding">
				<view class="cu-list grid col-3 radius-lg">
					<view class="padding-sm bg-gray">应纳所得税额</view>
					<view class="padding-sm bg-gray">税率</view>
					<view class="padding-sm bg-gray">速算扣除数</view>
					<block v-for="(item, index) in taxRule.taxRateDetailList">
						<view class="padding-sm  solid-bottom solid-top" :class="taxCalcDetailList[curPeriodIndex] && taxCalcDetailList[curPeriodIndex].taxRateId == item.id ? 'text-blue' : 'text-grey'">
							{{ item.minAmount }}~{{ item.maxAmount || '∞' }}
						</view>
						<view class="padding-sm  solid-bottom solid-top" :class="taxCalcDetailList[curPeriodIndex] && taxCalcDetailList[curPeriodIndex].taxRateId == item.id ? 'text-blue' : 'text-grey'">
							{{ item.rate }}%
						</view>
						<view class="padding-sm  solid-bottom solid-top" :class="taxCalcDetailList[curPeriodIndex] && taxCalcDetailList[curPeriodIndex].taxRateId == item.id ? 'text-blue' : 'text-grey'">
							{{ item.quickCalcAmount }}
						</view>
					</block>
				</view>
				<view class="text-gray text-sm text-left margin-top">
					<text class="text-red margin-right-xs">*</text><text>累计税前工资 - 累计各项社会保险费 - 累计起征点({{ taxRule.minLevyAmount }}) - 累积专项扣除费 = 应纳所得税额</text>
					<view class="margin-top-xs" v-if="taxCalcDetailList.length !== 0">
						{{  taxCalcDetailList[curPeriodIndex].calcFormula1 }} = 
						<text class="text-blue margin-left-xs"> {{ taxCalcDetailList[curPeriodIndex].calcTaxAmount }}</text>
					</view>
				</view>
				<view class="text-gray text-sm text-left margin-top">
					<text class="text-red margin-right-xs">*</text><text>应纳所得税额 * 税率 - 速算扣除数 - 累计已预缴税额 = 本期应纳税额</text>
					<view class="margin-top-xs" v-if="taxCalcDetailList.length !== 0">
						{{  taxCalcDetailList[curPeriodIndex].calcFormula2 }} = 
						<text class="text-blue margin-left-xs"> {{ taxCalcDetailList[curPeriodIndex].taxAmount }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		appMixin
	} from '@/store/app-mixin'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				curTaxRateId: 0,
				isContainsCompany: false
			}
		},
		props: {
			curPeriodIndex: {
				type: Number,
				default: null
			},
			modalVisible: {
				type: Boolean,
				default: false
			}
		},
		mixins: [appMixin],
		methods: {
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style>
</style>